<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="box"></div>
<script>
    var box = document.querySelector("#box");
    //事件监听 绑定事件  可以给一个对象绑定多个同样的事件
    box.addEventListener("click",function(){},false);//冒泡  默认值是false
    function boxClick(){
        box.removeEventListener("click",boxClick);//移除事件
    }
    box.addEventListener("click",boxClick,true);//捕获


    box.attachEvent("onmouseover",function(){});//ie 6-10支持
    function boxMouseover(){
        box.detachEvent("onmouseover",boxMouseover)//移除事件
    }
    box.attachEvent("onmouseover",boxMouseover)



    box.onclick = function(){//绑定事件
        box.onclick = null;//移除事件
    }

    box.onclick = function(event){
        event = event || window.event;
        event.target//真正出发的那个元素   兼容性问题
        event.srcElement//真正出发的那个元素
        var target = event.target || event.srcElement;
        event.currentTarget;// 和 this 是一样的 指的是所绑定的那个对象
        event.eventPhase;//获取事件阶段的3个值 1 捕获 2 目标  3 冒泡
        event.clientX;//获取鼠标在浏览器可视区域的横坐标  比如:固定定位
        event.clientY//获取鼠标在浏览器可视区域的纵坐标
        event.pageX;//获取鼠标在页面上横坐标  包括 滚动出去的距离   比如:绝对定位
        event.pageY;//获取鼠标在页面上纵坐标
        document.body.scrollLeft//获取页面滚动出去距离 left距离
        document.body.scrollTop//获取页面滚动出去距离 top距离
        document.documentElement.scrollLeft//获取页面滚动出去距离 left距离
        document.documentElement.scrollTop//获取页面滚动出去距离 top距离
        var pageY = document.body.scrollTop + event.clientY;

        box.offsetLeft//盒子距离最近带有定位的父元素的左侧距离
        box.offsetTop//盒子距离最近带有定位的父元素的上侧距离

    }

</script>
</body>
</html>